<style>
    #roleAuthTable + .layui-table-view .layui-table tbody tr:hover {
        background-color: transparent;
    }
</style>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar layui-form-pane">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">关键字</label>
                        <div class="layui-input-inline mr0">
                            <input id="roleEdtSearch" class="layui-input" type="text" placeholder="输入关键字"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="roleBtnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <button id="btnReset" class="layui-btn layui-btn-warm"><i class="layui-icon">&#xe669;</i>重置
                        </button>
                        <button id="roleBtnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
                    </div>
                </div>
            </div>

            <table class="layui-table" id="roleTable" lay-filter="roleTable"></table>
        </div>
    </div>
</div>

<script type="text/javascript" src="assets/libs/jquery/jquery-3.2.1.min.js"></script><!-- 表格操作列 -->
<script type="text/javascript" src="assets/libs/zTree/js/jquery.ztree.all-3.5.min.js"></script><!-- 表格操作列 -->
<script type="text/html" id="roleTableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="auth">接口权限</a>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="roleForm">
    <form lay-filter="roleForm" class="layui-form model-form">
        <input name="role_id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">角色名</label>
            <div class="layui-input-block">
                <input name="role_name" placeholder="请输入角色名" type="text" class="layui-input"
                       maxlength="20" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="comments" placeholder="请输入备注" class="layui-textarea" maxlength="200"></textarea>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="roleFormSubmit" lay-submit>保存</button>
        </div>
    </form>
</script>
<!-- 接口权限 -->
<script type="text/html" id="authModel">
    <tree id="test13" class="ztree"></tree>
</script>
<!-- 表格状态列 -->
<script type="text/html" id="authState">
    <input type="checkbox" lay-filter="authState" value="{{d.menu_id}}" lay-skin="switch"
           lay-text="ON|OFF" {{d.checked==1?'checked':''}}/>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table','admin', 'config'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var config = layui.config;

        //渲染表格
        var renderTable = function (){
            table.render({
                elem: '#roleTable',
                url: serverUrlAdmin+'Sysrole/lst',
                where: {
                    keyword: $('#roleEdtSearch').val()
                },
                page: true,
                cellMinWidth: 100,
                cols: [[
                    {type: 'numbers'},
                    {field: 'role_name', title: '角色名'},
                    {field: 'comments', title: '备注'},
                    {field: 'create_time', title: '创建时间'},
                    {align: 'center', toolbar: '#roleTableBar', title: '操作', minWidth: 200}
                ]]
            });
        }

        renderTable();
        // 添加按钮点击事件
        $('#roleBtnAdd').click(function () {
            showEditModel();
        });
        // 搜索按钮点击事件
        $('#roleBtnSearch').click(function () {
            renderTable();
        });
        $('#btnReset').click(function () {
            $('#roleEdtSearch').val('');
            form.render();
            renderTable();
        });
        // 工具条点击事件
        table.on('tool(roleTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') { //修改
                showEditModel(data);
            } else if (obj.event === 'del') { // 删除
                doDelete(obj.data.role_id);
            } else if (obj.event === 'auth') {  // 权限管理
                showPermModel1(obj.data.role_id);
            }
        });

        // 删除
        function doDelete(role_id) {
            layer.confirm('确定要删除吗？', {
                offset: '65px',
                skin: 'layui-layer-admin'
            }, function (i) {
                layer.close(i);
                layer.load(2);
                $.post(serverUrlAdmin + 'Sysrole/del', {role_id:role_id}, function (res) {
                    layer.closeAll('loading');
                    if (res.success === true) {
                        layer.msg('删除成功', {icon: 1});
                        table.reload('roleTable');
                        layer.closeAll('page');
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                },'json');
                return false;
            });
        }

        // 显示编辑弹窗
        function showEditModel(data) {
            admin.open({
                type: 1,
                area: '360px',
                offset: '65px',
                title: data ? '修改角色' : '添加角色',
                content: $('#roleForm').html(),
                success: function () {
                    form.val('roleForm', data);
                    // 表单提交事件
                    form.on('submit(roleFormSubmit)', function (d) {
                        layer.load(2);
                        $.post(serverUrlAdmin + 'Sysrole/add_or_save', d.field, function (res) {
                            layer.closeAll('loading');
                            if (res.success === true) {
                                layer.msg(res.obj, {icon: 1});
                                table.reload('roleTable');
                                layer.closeAll('page');
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        },'json');
                        return false;
                    });
                }
            });
        }
        // 权限管理
        function showPermModel1(roleId) {
            admin.open({
                title: '角色权限分配',
                btn: ['保存', '取消'],
                area: ['400px', '730px'],
                offset: ['-250px','650px'],
                content: '<ul id="treeAuth" class="ztree"></ul>',
                success: function (layero, index) {
                    $('#treeAuth').parent().parent().css('top',  ($(window).height() - $('#treeAuth').parent().parent().width())/2)
                    var setting = {
                        check: {enable: true},
                        data: {simpleData: {enable: true}},
                    };
                    var zNodes = [], all_data;
                    $.ajax({
                        type: "POST",
                        url: serverUrlAdmin + 'Sysmenu/auth_lst.html',
                        data: {role_id: roleId},
                        async: false, // 设置同步
                        dataType:"json",
                        success: function (response) {
                            var info = response.obj
                            all_data = info
                            info.forEach((ele) => {
                                var obj = {};
                                obj.id = ele.menu_id;
                                obj.pId = ele.parent_id;
                                obj.name = ele.menu_name;
                                obj.checked = ele.checked;
                                zNodes.push(obj);
                            })
                        },
                        error: function (xhr, status, error) {
                        }
                    });
                    $.fn.zTree.init($('#treeAuth'), setting, zNodes);
                    var zTreeObj = $.fn.zTree.getZTreeObj('treeAuth')
                    $.each(all_data, function(i){
                        var node = zTreeObj.getNodeByParam('id', zNodes[i].id)
                        if(all_data[i].checked == 1){
                            node.checked = true;
                            zTreeObj.updateNode(node.ture)
                        }
                    })
                    zTreeObj.expandAll(true)
                    $("#treeAuth").parent().parent().css("top","30px");
                },
                yes: function (index) {
                    layer.load(2);
                    var treeObj = $.fn.zTree.getZTreeObj('treeAuth');
                    var nodes = treeObj.getCheckedNodes(true);
                    var ids = new Array();
                    for (var i = 0; i < nodes.length; i++) {
                        ids[i] = nodes[i].id;
                    }
                    $.post(serverUrlAdmin + 'Sysmenu/add_save_auth', {role_id: roleId, authids:ids.toString()}, function(data){
                        layer.closeAll('loading');
                        table.reload('roleTable');
                        layer.closeAll();
                    })
                }
            });
        }
    });
</script>